<section class="my-section">
  <div class="container">
    {%- if section.settings.heading != blank -%}
      <h2 class="mb-3 mb-lg-6">{{ section.settings.heading }}</h2>
    {%- endif -%}
    {%- if section.settings.product_a_name != blank or section.settings.product_a_description != blank or section.settings.product_a_image != blank or section.settings.product_b_name != blank or section.settings.product_b_description != blank or section.settings.product_b_image != blank -%}
      <div class="row mb-5 mb-lg-6 gx-4 gx-lg-5">
        <div class="col-6">
          {%- if section.settings.product_a_image -%}
            <figure class="ratio ratio-1x1 mb-4 mb-lg-5" {% unless section.settings.show_full_width %}style="max-width: 412px;"{% endunless %}>
              <img class="object-fit-cover w-100 h-100" 
              srcset="{%- if section.settings.product_a_image >= 180 -%}{{ section.settings.product_a_image | img_url: '180x' }} 180w,{%- endif -%}
                {%- if section.settings.product_a_image.width >= 240 -%}{{ section.settings.product_a_image | img_url: '240x' }} 240w,{%- endif -%}
                {%- if section.settings.product_a_image.width >= 360 -%}{{ section.settings.product_a_image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.product_a_image.width >= 480 -%}{{ section.settings.product_a_image | img_url: '480x' }} 480w,{%- endif -%}
                {%- if section.settings.product_a_image.width >= 800 -%}{{ section.settings.product_a_image | img_url: '720x' }} 720w,{%- endif -%}"
              src="{{ section.settings.product_a_image | img_url: '600x' }}"
              sizes="(min-width: 1025px) 800px,
              (min-width: 750px) calc(100vw - 32px),
              calc(100vw - 30px)"
              alt="{{ section.settings.product_a_image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.product_a_image.width }}"
              height="{{ section.settings.product_a_image.height }}" >
            </figure>
          {%- endif -%}
          {%- if section.settings.product_a_name != blank or section.settings.product_a_description != blank or section.settings.product_a_description != blank -%}
            <div>
              {%- if section.settings.product_a_name != blank or section.settings.product_a_description != blank or section.settings.product_a_price != blank -%}
                <div class="mb-4">
                  {%- if section.settings.product_a_name != blank -%}
                    <h3 class="h4 mb-2">{{ section.settings.product_a_name }}</h3>
                  {%- endif -%}
                  {%- if section.settings.product_a_description != blank -%}
                    <div class="mb-2 richtext-with-link">{{ section.settings.product_a_description | replace: '<p>', '<p class="mb-0">' }}</div>
                  {%- endif -%}
                  {%- if section.settings.product_a_price != blank -%}
                    <p>{{ section.settings.product_a_price }}</p>
                  {%- endif -%}
                </div>
              {%- endif -%}
              {%- if section.settings.product_a_purchase_link != blank or section.settings.product_a_learn_more_link != blank -%}
                <div class="mx-n3 mt-n3">
                  {%- if section.settings.product_a_purchase_link != blank -%}
                    <a {% render 'link', link: section.settings.product_a_purchase_link %} href="{{ section.settings.product_a_purchase_link }}" class="btn btn-outline-primary mt-3 mx-3">{{ 'products.compare.buy_now' | t }}</a>
                  {%- endif -%}
                  {%- if section.settings.product_a_learn_more_link != blank -%}
                    <a {% render 'link', link: section.settings.product_a_learn_more_link %} href="{{ section.settings.product_a_learn_more_link }}" class="btn btn-link link-primary mt-3 mx-3">{{ 'products.compare.learn_more' | t }}</a>
                  {%- endif -%}
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        </div>
        <div class="col-6">
          {%- if section.settings.product_b_image -%}
            <figure class="ratio ratio-1x1 mb-4 mb-lg-5" {% unless section.settings.show_full_width %}style="max-width: 412px;"{% endunless %}>
              <img class="object-fit-cover w-100 h-100" 
              srcset="{%- if section.settings.product_b_image >= 180 -%}{{ section.settings.product_b_image | img_url: '180x' }} 180w,{%- endif -%}
                {%- if section.settings.product_b_image.width >= 240 -%}{{ section.settings.product_b_image | img_url: '240x' }} 240w,{%- endif -%}
                {%- if section.settings.product_b_image.width >= 360 -%}{{ section.settings.product_b_image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if section.settings.product_b_image.width >= 480 -%}{{ section.settings.product_b_image | img_url: '480x' }} 480w,{%- endif -%}
                {%- if section.settings.product_b_image.width >= 800 -%}{{ section.settings.product_b_image | img_url: '720x' }} 720w,{%- endif -%}"
              src="{{ section.settings.product_b_image | img_url: '600x' }}"
              sizes="(min-width: 1025px) 800px,
              (min-width: 750px) calc(100vw - 32px),
              calc(100vw - 30px)"
              alt="{{ section.settings.product_b_image.alt | escape }}"
              loading="lazy"
              width="{{ section.settings.product_b_image.width }}"
              height="{{ section.settings.product_b_image.height }}" >
            </figure>
          {%- endif -%}
          {%- if section.settings.product_a_name != blank or section.settings.product_a_description != blank or section.settings.product_a_price != blank -%}
            <div class="mb-4">
              {%- if section.settings.product_b_name != blank -%}
                <h3 class="h4 mb-2">{{ section.settings.product_b_name }}</h3>
              {%- endif -%}
              {%- if section.settings.product_b_description != blank -%}
                <div class="mb-2 richtext-with-link">{{ section.settings.product_b_description | replace: '<p>', '<p class="mb-0">' }}</div>
              {%- endif -%}
              {%- if section.settings.product_b_price != blank -%}
                <p>{{ section.settings.product_b_price }}</p>
              {%- endif -%}
            </div>
          {%- endif -%}
          {%- if section.settings.product_b_purchase_link != blank or section.settings.product_b_learn_more_link != blank -%}
            <div class="mx-n3 mt-n3">
              {%- if section.settings.product_b_purchase_link != blank -%}
                <a {% render 'link', link: section.settings.product_b_purchase_link %} href="{{ section.settings.product_b_purchase_link }}" class="btn btn-outline-primary mt-3 mx-3">{{ 'products.compare.buy_now' | t }}</a>
              {%- endif -%}
              {%- if section.settings.product_b_learn_more_link != blank -%}
                <a {% render 'link', link: section.settings.product_b_learn_more_link %} href="{{ section.settings.product_b_learn_more_link }}" class="btn btn-link link-primary mt-3 mx-3">{{ 'products.compare.learn_more' | t }}</a>
              {%- endif -%}
            </div>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}
    {%- for block in  section.blocks -%}
      {%- case block.type -%}
        {%- when 'compare_items' -%}
          {%- if block.settings.compare_items != blank or block.settings.product_a_info != blank or block.settings.product_b_info != blank -%}   
            <div>
              {%- if block.settings.compare_items != blank -%}
                <h4 class="mb-3">{{ block.settings.compare_items }}</h4>
              {%- endif -%}
              <div class="row gx-4 gx-lg-5">
                <div class="col-6">
                  {%- if block.settings.product_a_info != blank -%}
                    <div class="richtext-with-link">{{ block.settings.product_a_info | replace: '<p>', '<p class="mb-0">' }}</div>
                  {%- endif -%}
                </div>
                <div class="col-6">
                  {%- if block.settings.product_b_info != blank -%}
                    <div class="richtext-with-link">{{ block.settings.product_b_info | replace: '<p>', '<p class="mb-0">' }}</div>
                  {%- endif -%}
                </div>
              </div>
            </div>
            <hr class="my-4">
          {%- endif -%}
      {%- endcase -%}
    {%- endfor -%} 
  </div>
</section>

{% schema %}
  {
    "name": "Compare",
    "class": "product-compare",
    "tag": "section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Comparison",
        "label": "Heading"
      },
      {
        "label": "Product A image",
        "type": "image_picker",
        "id": "product_a_image"
      },
      {
        "label": "Product B image",
        "type": "image_picker",
        "id": "product_b_image"
      },
      {
        "type": "checkbox",
        "id": "show_full_width",
        "label": "Show full width image of column on desktop",
        "default": false
      },
      {
        "type": "text",
        "id": "product_a_name",
        "default": "Product A",
        "label": "Product A name"
      },
      {
        "type": "text",
        "id": "product_b_name",
        "default": "Product B",
        "label": "Product B name"
      },
      {
        "type": "richtext",
        "id": "product_a_description",
        "label": "Product A description"
      },
      {
        "type": "richtext",
        "id": "product_b_description",
        "label": "Product B description"
      },
      {
        "type": "text",
        "id": "product_a_price",
        "label": "Product A price"
      },
      {
        "type": "text",
        "id": "product_b_price",
        "label": "Product B price"
      },
      {
        "type": "url",
        "id": "product_a_purchase_link",
        "label": "Product A purchase link"
      },
      {
        "type": "url",
        "id": "product_a_learn_more_link",
        "label": "Product A learn more link"
      },
      {
        "type": "url",
        "id": "product_b_purchase_link",
        "label": "Product B purchase link"
      },
      {
        "type": "url",
        "id": "product_b_learn_more_link",
        "label": "Product B learn more link"
      }
    ],
    "blocks": [
      {
        "type": "compare_items",
        "name": "Compare items",
        "settings": [
          {
            "type": "text",
            "id": "compare_items",
            "label": "Compare items",
            "default": "Compare items"
          },
          {
            "type": "richtext",
            "id": "product_a_info",
            "label": "Product A info",
            "default": "<p>Info</p>"
          },
          {
            "type": "richtext",
            "id": "product_b_info",
            "label": "Product B info",
            "default": "<p>Info</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Compare",
        "blocks": [
          {
            "type": "compare_items"
          },
          {
            "type": "compare_items"
          },
          {
            "type": "compare_items"
          }
        ]
      }
    ]
  }
{% endschema %}